<template>
  <div class='tinymceBox'>
    <h1 style="margin:0 0 10px 0">
      <el-row>
        <el-col :span="24" style="text-align:right">
           <i class="el-icon-error" style="background:#e6e6e6" @click="goBack"></i>
        </el-col>
      </el-row>
    </h1>
    <div>
      <el-row class="rowmagin">
        <el-col :span="2" style="height:40px;line-height:40px">医&nbsp;&nbsp;&nbsp;&nbsp;生:</el-col>
        <el-col :span="12">
          <el-select v-model="doctorid" filterable placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="rowmagin">
        <el-col :span="3">姓名：{{name}}</el-col>
        <el-col :span="5">手机：{{tel}}</el-col>
        <el-col :span="5">咨询内容：{{server_tag}}</el-col>
        <el-col :span="3">年龄：{{age}}</el-col>
        <!-- <el-col :span="8">到店时间：{{time}}</el-col> -->
      </el-row>
      <div class="rowmagin">情况登记：</div>
      <el-input  type="textarea" :rows="4" v-model="formLabelAlign.situation_registration" style="width:60%"></el-input>
      <div class="rowmagin">医生建议：</div>
      <el-input  type="textarea" :rows="4" v-model="formLabelAlign.doctors_suggest" style="width:60%"></el-input>
      <div class="rowmagin">添加图片：</div>
      
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="formLabelAlign.logoImg" alt="">
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <ul class="el-upload-list el-upload-list--picture-card">
            <li style="float:left" :tabindex="index" class="el-upload-list__item is-success" v-for="(item,index) in fileList3" :key="index">
              <img :src="item" alt="" class="el-upload-list__item-thumbnail">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="shouimg(item)"><i class="el-icon-zoom-in"></i></span>
                <span class="el-upload-list__item-delete" @click="deletImg(index)"><i class="el-icon-delete"></i></span>
              </span>
            </li>
          </ul>
          <el-upload  style="float:left" 
            action="https://upload.qiniup.com/"
            list-type="picture-card"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleOkList"
            :data="postData">
            <i class="el-icon-plus"></i>
          </el-upload>

        </el-col>
      </el-row>
      <el-row style="width:60%">
        <el-col :span="12"><el-button type="primary" @click="submitArticle('formAling')">提  交</el-button></el-col>
      </el-row>
     
    </div>
   
  </div>
</template>

<script>
import Http from '@/Http/Http'
import getTime from '@/Http/getTime'

export default {
  props:['editData'],
  data () {
    return {
      postData:{
        token:'',
      },
      name:'',
      tel:'',
      server_tag:'',
      age:'',
      doctorid:'',
      dialogVisible: false,
      dialogImageUrla:'',
      options:'',
      doctTime:'',//到店时间
      tokenimgUrl:'', //存储域名
      fileList3:[],
      formLabelAlign:{
        situation_registration:'',
        doctors_suggest:'',
        logoImg:'',
        name:''
      },
      
      fileList:[],
      
    }
    
  },

  computed: {
  },
  mounted () {
    
  },
  created() {
    console.log(this.editData)
    this.getToken();
    this.getalllist();
    if (this.editData) {
      console.log('edit')
    }
  },
  methods:{
    getToken() {
      Http.QiniuToken({})
      .then( res => {
        this.postData.token = res.data.data.uptoken;
        this.tokenimgUrl = res.data.data.domain
      })
      .catch( error => {
        this.$message.error('服务器请求失败，请重新登录')
        console.log(error)
      })
      this.name = this.editData.name;
      this.tel =  this.editData.tel
      this.server_tag = this.editData.server_tag;
      this.age = this.editData.age;
      this.doctorid = this.editData.doctor_id;
      this.formLabelAlign.doctors_suggest  = this.editData.doctors_suggest;
      this.formLabelAlign.situation_registration  = this.editData.situation_registration;

      // const datas = new Date(this.editData.age);
      // this.time = getTime(this.editData.time)
      // this.age = datas.getFullYear();
      this.fileList3 = this.editData.imagesList

    },
    getalllist() {
      Http.getAllDoctors()
      .then( res => {
        console.log(res)
        this.options = res.data.data
      })
    },
    handleRemoveLogo(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(event, file, fileList) {
      console.log('预期')
    },
    handleOkLogo(responed) {
      console.log(responed)
      this.formLabelAlign.logoImg = `http://${this.tokenimgUrl}/${responed.key}`
      console.log('上传图片',this.formLabelAlign.logoImg)
    },
   
    submitArticle(val) {
      const param = {
        "id":this.editData.id,
        "doctor_id":this.doctorid,
        "situation_registration":this.formLabelAlign.situation_registration,
        "doctors_suggest":this.formLabelAlign.doctors_suggest,
        "imagesList":this.fileList3
      }
      console.log(param)
      Http.editReserve(param)
      .then( res => {
        if (res.data.code == 200) {
          this.$message.success('提交成功')
          this.goBack()
        } else {
          this.$message.error('提交失败')
        }
      })
    },
    
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (isJPG || isPNG) {
        return true;
      } else {
          this.$message.error('上传图片格式不正确!');
        return false;
      }
    },
     // 图片列表 方法  ----------------------
    shouimg(val){
      this.dialogVisible = true;
      this.dialogImageUrl = val;
    },
    deletImg(index) {
      this.fileList3.splice(index,1)
    },
    handleOkList(responed) {
      this.fileList3.push(`http://${this.tokenimgUrl}/${responed.key}`);
    },
    goBack(){
      this.$emit('getlist')
    },
  }
}
</script>
<style scoped>
.rowmagin{
  margin:15px 0 10px 0;
}
.tinymceBox{
  padding:5px;
}
</style>
